<template>
  <div class="withdrawals">
    <vheader pageTitle="提现"></vheader>
    <ul>
      <li class="border-1px">
        <p>可提现金额</p>
        <span :style="{color: '#ff4133'}">{{ balance.toFixed(2) }} 元</span>
      </li>
      <li class="border-1px">
        <p>提现</p>
        <input type="number" v-model.number="witndrawalsAmount" placeholder="">
        <span>元</span>
      </li>
      <li class="border-1px" @click="toAddBankCard">
        <add-bank-card></add-bank-card>
      </li>
      <li v-for="(card, index) in bankCards" class="border-1px card">
        <img :src="card.bankImage" alt="">
        <span>{{ card.bankName }}</span>
        <strong>{{ card.bankCardNo }}</strong>
        <label :for="card.uuid" :class="selectedBankId === card.uuid ? 'icon-Selected' : 'icon-Unchecked'"></label>
        <input type="radio" name="bankcard" :id="card.uuid" :value="card.uuid" v-model="selectedBankId">
      </li>
    </ul>
    <div class="vbutton-wrapper">
      <vbutton
        text="提现"
        @click="withDrawals"
        :loading="loading"></vbutton>
    </div>
    <span @click="toggle">查看提现说明</span>
    <div class="withdrawals-des" v-show="desShow">
      <p>1、请注意单笔充值限额，目前第三方支付默认单笔充值最大金额为10万元，具体额度根据银行和用户设定为准。</p>
      <p>2、①充值未投资的资金，在30天内提现需收取0.3%的手续费。②充值投资后，已回款的资金申请提现，收取1元/笔提现手续费。（此手续费由第三方支付机构收取，并非分秒金融收取的。）</p>
      <p>3、提现到账时间：分秒金融实行提现(T+0)，当天申请的提现当日可到账。</p>
      <p>4、分秒金融禁止使用信用卡进行充值，禁止洗钱、信用卡套现、虚假交易等行为，一经发现并确认，将终止该账户的使用。</p>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'
  import addBankCard from 'components/addBankCard'
  import { Toast } from 'mint-ui'
  import vbutton from 'components/common/button'

  export default {
    data () {
      return {
        acctKey: null,
        bankCards: [],
        desShow: false,
        witndrawalsAmount: null,
        selectedBankId: null,
        loading: false
      }
    },
    computed: {
      balance () {
        return this.$store.state.user.balance
      }
    },
    watch: {
      selectedBankId (newValue) {
        console.log(newValue)
      }
    },
    methods: {
      toggle () {
        this.desShow = !this.desShow
      },
      toAddBankCard () {
        if (this.$store.state.user.openAcct === 0) {
          Toast('实名认证后才能绑定银行卡~')
        } else {
          this.$router.push('/addBankCard')
        }
      },
      withDrawals () {
        if (this.witndrawalsAmount === null || this.witndrawalsAmount < 100) {
          Toast('最小提现金额为100元')
          return
        }
        if (this.selectedBankId === null) {
          Toast('您没有可用的银行卡，请先添加银行卡')
          return
        }
        if (this.$store.state.user.openAuth === 0) {
          Toast('签署协议才可以进行提现')
          return
        }
        this.loading = true
        this.$http.post('/api/member/account/acctDraw', `acctKey=${this.acctKey}&amount=${this.witndrawalsAmount}&bankUuid=${this.selectedBankId}`)
        .then((res) => {
          if (res.data.success) {
            Toast('提现申请成功')
            setTimeout(() => {
              this.loading = false
              this.witndrawalsAmount = null
              this.$router.go(0)
            }, 500)
          } else {
            Toast(res.data.msg)
            this.loading = false
          }
        })
        .catch((err) => {
          this.loading = false
          console.log(err)
        })
      }
    },
    created () {
      this.acctKey = this.$cookie.get('acctKey')
      this.$http.get(`/api/member/memberBank/list?acctKey=${this.acctKey}&platformType=1`)
        .then((res) => {
          if (res.data.success) {
            this.bankCards = res.data.data.list
            if (this.bankCards.length !== 0) {
              this.selectedBankId = this.bankCards[0].uuid
            }
          } else {
            console.log(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    components: {
      vheader,
      addBankCard,
      Toast,
      vbutton
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .withdrawals {
    font-size: 30px;
    color: $base-666;
    text-align: center;
    ul {
      padding: 0 30px;
    }
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 108px;
      @include border-1px(#{$base-e5e5e5});
      input {
        outline: none;
        flex: 1 0 auto;
        text-align: right;
        padding-right: 10px;
        font-size: 36px;
        color: $base-666;
        &[type="radio"] {
          display: none;
        }
      }
      &.card {
        justify-content: flex-start;
        margin: 0 30px;
        img {
          width: 46px;
          height: 46px;
        }
        span {
          margin-left: 20px;
          margin-top: 5px;
        }
        strong {
          margin-left: 10px;
          flex: 1 0 auto;
          text-align: left;
          margin-top: 5px;
        }
        .icon-Selected {
          color: $base-ff6c00;
        }
        .icon-Unchecked {
          color: $base-e5e5e5;
        }
      }
    }
    &>span {
      text-decoration: underline;
      font-size: 26px;
      color: $base-ff6c00;
    }
    &-des {
      margin-top: 30px;
      color: $base-ff6c00;
      padding: 0 30px;
      p {
        text-align: left;
        text-indent: 2em;
        font-size: 22px;
        line-height: 46px;
      }
    }
    .vbutton-wrapper {
      margin: 70px 0 60px 0;
    }
  }
</style>
